<template>
  <el-main>
    <el-header>
      <head-from @seach="seach"></head-from>
    </el-header>
    <add-brand
      @deletes="deletes"
      @addbrands="addbrands"
      :multipleSelection="multipleSelection"
    ></add-brand>

    <el-table
      :data="tableData"
      v-model="tableData"
      style="
        width: 100%;
        min-width: 1190px;
        height: 82vh;

        overflow: hidden;
      "
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" align="center" width="50px" />
      <el-table-column prop="brandName" align="center" label="品牌名称" />
      <el-table-column prop="companyName" align="center" label="企业名称" />
      <el-table-column prop="ordered" align="center" label="排序" />
      <el-table-column prop="statusStr" align="center" label="当前状态" />
      <el-table-column align="center" label="操作">
        <el-row>
          <el-button type="primary">修改</el-button>
          <el-button type="danger">删除</el-button>
        </el-row>
      </el-table-column>
    </el-table>
    <el-footer>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="15"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </el-footer>
  </el-main>
</template>

<script>
import HeadFrom from "@/components/HeadFrom.vue";
import AddBrand from "@/components/AddBrand.vue";

import { onMounted, onBeforeMount, reactive, ref } from "vue";
import { allbrand, selectByPage, selectPageAndCondition } from "@/network/user";
import { useStore } from "vuex";
import { addbrand } from "@/network/user";
import { ElMessage, ElMessageBox } from "element-plus";
//批量删除的方法
import { deleteById } from "@/network/user";
export default {
  components: { HeadFrom, AddBrand },

  setup(props, context) {
    let currentPage = ref(1);
    let pageSize = ref(15);
    let totalCount = ref(1);

    const handleSizeChange = (val) => {
      // console.log(`每页 ${val} 条`);
      pageSize.value = val;
      changeTabledata();
    };
    //重新查询页面数据
    const changeTabledata = () => {
      selectByPage(currentPage.value, pageSize.value).then((res) => {
        tableData.value = res.data.rows;
        totalCount.value = res.data.totalCount;
      });
    };
    const handleCurrentChange = (val) => {
      currentPage.value = val;
      changeTabledata();
    };
    let multipleSelection = ref([]);
    const aa = ref(null);

    let tableData = ref([]);
    const store = useStore();
    onMounted(() => {
      changeTabledata();
    });
    //添加方法
    const addbrands = (data) => {
      addbrand(data).then(() => {
        changeTabledata();
      });

      ElMessage.warning("添加成功");
    };
    const handleSelectionChange = function (val) {
      multipleSelection.value = val;
    };
    const tableRowClassName = function ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    };
    //删除方法
    const deletes = () => {
      let ids = [];
      multipleSelection.value.map((item) => {
        ids.push(item.id);
      });
      if (ids.length == 0) {
        ElMessage.info({
          message: "请选择数据",
        });
      } else {
        ElMessageBox.confirm("此操作将永久删除这条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteById(ids);
            allbrand().then((res) => {
              tableData.value = res.data;
            });
            ElMessage.success({
              message: "删除成功!",
            });
          })
          .catch(() => {
            ElMessage.info({
              message: "已取消删除",
            });
          });
      }
    };
    const seach = (data) => {
      console.log(data);
      selectPageAndCondition(1, 15, data).then((res) => {
        tableData.value = res.data.rows;
      });
    };
    return {
      seach,
      totalCount,
      currentPage,
      pageSize,
      handleCurrentChange,
      handleSizeChange,
      deletes,
      addbrands,
      tableData,
      handleSelectionChange,
      tableRowClassName,
      multipleSelection,
    };
  },
};
</script>

<style scoped>
.el-header {
  padding: 15px;
  background: #c6e2ff;
}
.el-main {
  padding: 0px;
}
.el-row {
  width: 180px;

  margin-left: 80px;
}
.el-pagination {
  float: right;
  margin-right: 20px;
  margin-top: 10px;
}
</style>
